<template>
    <div>
      <h1>个人资料</h1>
      <el-form :model="user" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <input type="file" @change="handleFileChange" />
          <img v-if="user.profilePicture" :src="user.profilePicture" alt="Profile Picture" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUser">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  
  const user = ref({
    username: '',
    email: '',
    phone: '',
    profilePicture: ''
  });
  
  const fetchUser = async () => {
    try {
      const response = await axios.get('/api/user/1'); // 假设用户 ID 是 1
      user.value = response.data;
    } catch (error) {
      console.error('Error fetching user:', error);
    }
  };
  
  const updateUser = async () => {
    try {
      await axios.put(`/api/user/1`, user.value); // 假设用户 ID 是 1
      alert('用户信息已保存');
    } catch (error) {
      console.error('Error updating user:', error);
    }
  };
  
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        user.value.profilePicture = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  };
  
  onMounted(() => {
    fetchUser();
  });
  </script>
  
  <style scoped>
  /* 样式 */
  </style>
  